<script setup>
import {ref} from 'vue'
import { useNavBarStyle } from '../../utils/system';

const props=defineProps({
	keyword:{
		type:String,
		default:''
	}
})

const emits=defineEmits(['onConfirm','update:keyword'])

const {navBarHeight} =useNavBarStyle
//组件穿透
defineOptions({
	options:{
		styleIsolation:"shared"
	}
})


//搜素事件
const handleSearch=()=>{
	emits('onConfirm')
}

const handleInput=(e)=>{
	emits('update:keyword',e)
}
</script>

<template>
	<view class="search">
		<view class="fixed">
			<uni-easyinput suffixIcon="search"  :value="keyword" @input="handleInput" placeholder="请输入内容" @iconClick="handleSearch" @confirm="handleSearch"></uni-easyinput>
		</view>
		{{keyword}}
		<view class="block"></view>
	</view>
</template>



<style lang="scss" scoped>
.search{
	.fixed{
			  background-color: $uni-color-primary;
			  padding: 10rpx 32rpx;
			  width: 100%;
			  height: 90rpx;
			  position: fixed;
			  top:v-bind(navBarHeight);
			  left:0;
			   z-index: 8000;
			  :deep(.is-input-border){
			  	border-radius: 50px;
			  	border-color: $uni-color-primary !important;
			  }
	}
	.block{
			  height: 90rpx;
	}
}
</style>